<div class="flex pb-8">
  <p class="text-lg flex items-center gap-2">
    Recalculate Metadata Scores:
    <i
      class="pi pi-info-circle text-blue-500"
      pTooltip="Recomputes match scores for all books based on the latest weights."
      tooltipPosition="right"
      style="cursor: help;"
    ></i>
  </p>

  <p-button
    class="pl-4"
    type="button"
    icon="pi pi-refresh"
    label="Recalculate"
    [disabled]="isRecalculating"
    (click)="recalculate()"
    outlined
  ></p-button>
</div>


<p class="text-lg flex items-center gap-2">
  Metadata Field Weights
  <i
    class="pi pi-info-circle text-blue-500"
    pTooltip="Adjust how important each metadata field is when computing match scores. Higher weights make fields more influential."
    tooltipPosition="right"
    style="cursor: help;"
  ></i>
</p>

<div class="flex flex-col space-y-6 p-4">
  <div class="p-4 space-y-4 max-w-4xl custom-border">
    <form [formGroup]="form">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
        @for (key of orderedKeys; track key) {
          <div class="flex text-sm items-center gap-2">
            <label class="capitalize w-full max-w-[150px]">
              {{ labelMap[key] }}
            </label>
            <p-inputNumber
              [formControlName]="key"
              [min]="0"
              [max]="10"
              fluid
              [showButtons]="true"
            />
          </div>
        }
      </div>
      <div class="mt-4 flex justify-end">
        <p-button
          type="button"
          severity="success"
          label="Save"
          icon="pi pi-save"
          outlined
          [disabled]="isSaving"
          (click)="save()">
        </p-button>
      </div>
    </form>
  </div>
</div>
